//生产管理系统/报警管理

import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Card, DatePicker, Button,Divider  } from 'antd';
import Top1 from './sub/Top1';
import Top2 from './sub/Top2';
import Top3 from './sub/Top3';
import Top4 from './sub/Top4';
import Top5 from './sub/Top5';
import Top6 from './sub/Top6';
import DataAlarm from './tab/DataAlarm';
import HistoricalAlarm from './tab/HistoricalAlarm';
import style from './AlarmManagement.less';
import moment from "moment";
import {AlarDetails,alarmStatistics,alarmStatistics56,alarmStatistics4,alarmStatistics2} from "../../services/redmoe";
//引入字体图标组件
//tab切换套件
const TabPane = Tabs.TabPane;

function callback(key) {
    console.log(key);
}
//下拉套件
const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',

}, {
    value: 'jiangsu',
    label: 'Jiangsu',

}];

//日期选择器套件
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

function onChange(date, dateString) {
    console.log(date, dateString);
}

//下拉联动套件
// function onChange(value, selectedOptions) {
//     console.log(value, selectedOptions);
// }

// function filteValue, path) {
//     return (path.some(option => (option.label).toLowerCase().indexOValue.toLowerCase()) > -1));
// }

class AlarmManagement extends Component {
    state = {
        montext:null,
        Topdata:{
            data:[
                {value:335, name:'普通报警'},
                {value:310, name:'重要报警'}
            ]
        },
        dateTime:"",
        tu1:[],
        tu2:{},
        tu3:{},
        tu4:{},
        tu5:{},
        tu6:{}
    };
    //日期选择器
    MonthPicker = (date, dateString) => {
        console.log(date, dateString);
        let data = moment(data).format("YYYY-MM-DD HH:mm:ss")
        console.log(data)
        this.setState({
           dateTime:dateString,
           montext:date
        })
    }
    //页面进入事件
    componentDidMount () {
    
        
    var myDate=moment(new Date()).format("YYYY-MM-01 00:00:00")
     
       //这里会发出页面默认请求拿到数据给下面的每个top
      
        let data ={
            startTime:myDate
        }
        alarmStatistics({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                    tu1,tu3
                })
            }
        })
     
        alarmStatistics2({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                    tu2
                })
            }
        })
        alarmStatistics4({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                  tu4
                })
            }
        })
        alarmStatistics56({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                 tu5,tu6
                })
            }
        })

    }

    //查询月事件
    save = () => {
        let data ={
            startTime: `${this.state.dateTime}-01 00:00:00`
        }
       
        alarmStatistics({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                    tu1,tu3
                })
            }
        })
        alarmStatistics2({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                    tu2
                })
            }
        })
        alarmStatistics4({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                  tu4
                })
            }
        })
        alarmStatistics56({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                 tu5,tu6
                })
            }
        })
    }
    //重置事件
    reset = () => {
        this.setState({
            montext:null
        })

        var myDate=moment(new Date()).format("YYYY-MM-01 00:00:00")
         let data ={
             startTime:myDate
         }
         alarmStatistics({...data}).then(data => {
             console.log(data)
             if(data.data.rc == 0) {
                 let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                 this.setState({
                     tu1,tu3
                 })
             }
         })
         alarmStatistics2({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                    tu2
                })
            }
        })
        alarmStatistics4({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                  tu4
                })
            }
        })
        alarmStatistics56({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                let {tu1,tu2,tu3,tu4,tu5,tu6} = data.data.ret
                this.setState({
                 tu5,tu6
                })
            }
        })
    }

    render() {
        let {tu1,tu2,tu3,tu4,tu5,tu6} = this.state
        return (
            <div>
                <Tabs defaultActiveKey="1" onChange={callback}
                    tabBarStyle={{ margin: 0, border: 0, overflow: 0 }}

                >
                    <TabPane tab="当日报警" key="1">
                        <DataAlarm
                         history ={this.props.history}
                        />
                    </TabPane>
                    <TabPane tab="历史报警" key="2" >
                       <HistoricalAlarm
                       history ={this.props.history}
                       />
                    </TabPane>
                    <TabPane tab="报警统计" key="3">
                        {/* 接警统计 */}
                        <Card
                            className={style.CardTop}
                        >
                            <div className={style.Top} style={{width:400}}>

                                月份选择:
                                <MonthPicker size="small" onChange={this.MonthPicker} placeholder=""
                                style={{width:120}}
                                className={style.MonthPicker}
                                value={this.state.montext}
                                />
 
                                <Button type="primary" className={style.primary} onClick={this.save}>查询</Button>
                                <Button className={style.reset} onClick={this.reset}>重置</Button>
                            </div>

                        </Card>
                        <Card className={style.one_Card}
                        title="月度总览"
                        headStyle={{height:30,minHeight:8,lineHeight:0}}
                        >
                           <Top1
                            tu1={tu1}
                           />
                           <Divider type="vertical" className={style.Divider}/>
                           <Top2
                            tu2={tu2}
                           />
                           <Divider type="vertical" className={style.Divider1}/>
                           <Top3
                            tu3={tu3}
                           />
                        </Card>
                        <Card className={style.one_Card}
                         title="月度变化"
                         headStyle={{height:30,minHeight:8,lineHeight:0}}
                        >
                             <Top4
                              tu4={tu4}
                             />
                             <Divider type="vertical" className={style.Divider}/>
                             <Top5
                             tu5={tu5}
                             />
                             <Divider type="vertical" className={style.Divider1}/>
                             <Top6
                              tu6={tu6}
                             />
                        </Card>


                    </TabPane>
                </Tabs>

            </div>
        )
    }
}

export default connect()(AlarmManagement)